const HtmlWebpackPlugin = require('html-webpack-plugin')
const WebpackBar = require('webpackbar')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const config = require('./config')
const path = require('path');
const isDev = process.env.NODE_ENV === 'development'
const templateConfig = isDev ? config.dev.template : config.prod.template
module.exports = {
    entry: {
        main: './src/main.js',
    },
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[hash].js',
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: [
                            [
                                "@babel/plugin-transform-runtime",
                                {
                                    "corejs": 3
                                }
                            ]
                        ]
                    }
                },
                exclude: /node_modules/ //排除 node_modules 目录
            },
            {
                test: /\.(le|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: function () {
                                    return [
                                        require('autoprefixer')({
                                            "overrideBrowserslist": [
                                                ">0.25%",
                                                "not dead"
                                            ]
                                        })
                                    ]
                                }
                            }

                        }
                    },
                    'less-loader'
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10240, //10K
                            esModule: false,
                            outputPath: 'images/',
                            name: '[name].[hash].[ext]'
                        }
                    }
                ],
                exclude: /node_modules/,
                type: 'javascript/auto',
            }
        ]
    },
    plugins: [
        //打包进度条
        new WebpackBar(),
        //自动生成html文件
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: false,
                collapseWhitespace: false
            },
            hash: true,
            config: templateConfig,
            chunks: ['main']
        }),
        //处理模板Html引用静态文件路径问题
        // new CopyPlugin({
        //     patterns: [
        //         { from: "public/js/*.js", to: path.resolve(__dirname, 'dist', '') },
        //     ],
        // }),
        //  抽离css
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        })

    ],
    devServer: {
        port: '3000', //默认是8080
        compress: true //是否启用 gzip 压缩
    }
}